<template>
  <div class="home" v-loading="loading">
    <el-row style="margin-bottom: 10px">
      <el-col :span="22"></el-col>
    </el-row>
    <el-row :gutter="22">
      <el-col :span="9">
        <el-card shadow="hover">
          <div class="clearfix">
            <img src="~@/assets/imgOne.png" alt="" />
            <div class="u-info" style="float: left">
              <p>{{ info.loginname }}</p>
              <p>{{ info.username }}</p>
            </div>
          </div>
          <div class="login-inf">
            <p>
              上次登入时间：<span>{{ info.loginDate }}</span>
            </p>
            <p>上次登入地点：<span>火星</span></p>
          </div>
        </el-card>
        <el-card class="tab-info" style="margin-top: 10px; height: 400px">
          <compon-swiper :imageList="images"></compon-swiper>
        </el-card>
      </el-col>
      <el-col :span="15" style="padding-left: 0" v-show="this.isShow">
        <el-card class="tab-info">
          <compon-echarts></compon-echarts>
        </el-card>
        <el-card class="button-search">
          <div id="pie-char" style="height: 270px"></div>
        </el-card>
        <el-card
          class="button-search"
          v-show="this.isShow"
          style="margin-left: 10px">
          <compon-histogram :dataValue="histogramData"> </compon-histogram>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import ComponEcharts from '../../components/ComponEcharts.vue'
import ComponHistogram from '../../components/ComponHistogram.vue'
import ComponSwiper from '../../components/ComponSwiper2.vue'
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

export default {
    name: 'home',
    components: {
      ComponEcharts,
      ComponHistogram,
      ComponSwiper
    },
    data(){
        return{
          loading: false,
          isShow: true,
          screenWidth: 0,
          info:{
            loginname: null,
            username: null,
            loginDate: '',
          },
          histogramData: [
            {name: '苹果', value: 90},
            {name: '小米', value: 121},
            {name: '三星', value: 70},
            {name: '华为', value: 200},
            {name: 'OPPO', value: 110},
            {name: 'VIVO', value: 105},
          ],
          images: [
            { imgUrl: 'http://192.168.1.13:9998/img/wallpaper-1.jpg' },
            { imgUrl: 'http://192.168.1.13:9998/img/wallpaper-1.jpg' },
            { imgUrl: 'http://192.168.1.13:9998/img/wallpaper-1.jpg' },
            { imgUrl: 'http://192.168.1.13:9998/img/wallpaper-1.jpg' },
            { imgUrl: 'http://192.168.1.13:9998/img/wallpaper-1.jpg' }
          ]
        }
    },
    created(){
      this.$axios.get(this.$store.state.address.url + 'testVueElement')
      .then(response=>(this.info = response.data));
    },
    methods:{
      dateFormat(row, column) {
        var date = row[column.property];
        if (date === undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      test(){
        var chartDom = document.getElementById('pie-char');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'center',
          },
          series: [
            {
              top: '35px',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              color: ['#409eff', '#5cb87a', '#67C23A', '#E6A23C', '#F56C6C', '#3c3c3c'],
              data: this.histogramData
            }
          ]
        };
        option && myChart.setOption(option);
      },
      getHis(){
        // this.$axios
        // .get(this.$store.state.address.url + 'queryInfo').then(response => {
        //   this.echartsDataValue = response.data
        //   console.log(this.echartsDataValue);
        // })
      }
    },
    beforeCreate(){
      this.loading = true
    },
    mounted(){
      this.test()
      this.getHis()
      this.screenWidth = document.body.clientWidth;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
        });
      };
    },
    /** 监听浏览器宽度*/
    watch: {
      screenWidth (val) {
        if (1320 > this.screenWidth) {
          this.isShow = false
        }else{
          this.isShow = true
        }
      },
    }    
}
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  color: #e9f3f3;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.clearfix img {
  width: 100px;
  height: 100px;
  float: left;
}
.login-inf {
  border-top: 1px solid #e9eef3;
}
.el-table {
  font-size: 13px;
}
.button-search {
  width: 49%;
  height: 100%;
  margin-top: 10px;
  float: left;
}
</style>